<template>
  <div class="scene-global-page">
    <div>
      <Breadcrumb
        style="margin-right: 20px;"
        @deleteOtherRoute="deleteOtherRouteMethods"
        ref="BreadcrumbRef"
      ></Breadcrumb>
      <FileContentSearchHeader
        :searchList="['mediaName','client']"
        :need-list="['search', 'addButton', 'delete']"
        @addNewFold="addNewFold"
        add-button-text="添加"
        @startUploadFile="startUploadFile"
        @changeSearch="changeSearchMethods"
        @mutiSendFile="mutiSendFileMethods"
        @mutiDel="terminalDelMethods"
      >
        <template slot="media-input">
          <el-input
            placeholder="搜索场景名称"
            suffix-icon="el-search"
            @keyup.native.enter="changeSearchMethods"
            v-model="searchObj.title">
          </el-input>
        </template>
      </FileContentSearchHeader>
    </div>

    <CommonTable
      class="commonTable"
      ref="singleSceneTableRef"
      :is-selection="true"
      :is-show-index="true"
      :is-has-opera="true"
      :t-column-data="globalSceneCol"
      :remote-api="getFile"
      :query-params="searchObj"
      :is-reserve-select="true"
      @changeRow="changeRowMethods"
    >
      <template slot="media_name" slot-scope="scope">
        <!--文件夹-->
        <div
          class="file-name-row"
          :ref="`dragBlock${scope.$index}`"
          v-if="scope.row.file_type == '1'"
          :data-id="scope.row.id"
          @click="goToNextFold(scope.row)"
          @drop="(ev) => {dropNewHandler(ev, scope.row)}"
          @dragenter.prevent
          @dragover.prevent
        >
          <img src="../distribute/images/folder.png" class="file-icon" alt="">
          <span :data-id="scope.row.id" :class="scope.row.file_type == '1'?'fold-class': ''">
            {{scope.row.noSuffixMediaName}}
          </span>
        </div>

        <div
          class="file-name-row"
          :ref="`dragBlock${scope.$index}`"
          :draggable="true"
          :data-id="scope.row.id"
          v-else
          @dragstart="dragstartMethods(scope.row)"
          @click="goToNextFold(scope.row)"
        >
          <img src="@/assets/scene/client.png" class="file-icon" alt="">
          <span :data-id="scope.row.id">
            {{scope.row.title}}
          </span>
        </div>
      </template>
      <template slot="media_type" slot-scope="scope">
        {{scope.row.file_type == '1'? '文件夹': `场景`}}
      </template>
      <template slot="operate" slot-scope="scope" class="operate-btn">
        <el-button type="text" @click="editTerminalScene(scope.row)">编辑</el-button>
        <el-button type="text" class="del-button" @click="showDelSceneWarn(scope.row)">删除</el-button>
        <el-button v-if="$route.query.parentId && scope.row.file_type != 1" type="text" @click="moveToPrevParent(scope.row)">移动至根目录</el-button>
      </template>
    </CommonTable>

    <SceneEditForm
      :isGlobal="false"
      :show="isShowSceneForm"
      ref="sceneEditFormRef"
      @close="handlerClose"
      @submitSuccess="submitSuccessMethods"
    ></SceneEditForm>

    <WarnPanelDialog
        :status-prop="isShowDelWarning"
        warn-content="是否删除该场景"
        @confirmHandler="confirmDmDelMethods"
        @cancelHandler="cancelDelMethods"
    />
  </div>
</template>

<script>
import SceneEditForm from "@/views/scene/component/sceneEditForm.vue";
import Mixins from "../distribute/mixins/mixins";
import {globalSceneCol} from './tableCol/globalSceneCol'
import * as service from './service'
import {getWindowSceneDetail} from "./service";
export default {
  mixins: [Mixins],
  components: {
    SceneEditForm
  },
  data() {
    return {
      isShowDelWarning: false,
      globalSceneCol,
      getFile: service.getWindowScene,
      searchObj: {
        type: 2,
        title: '',
        clientId: null,
        page: 1,
        pageSize: 20
      },
      isShowSceneForm: false,
      delClickCache: {},
      selectSceneList: []
    }
  },
  mounted() {
    this.getSceneList()
  },
  methods: {
    terminalDelMethods() {
      if(this.selectSceneList.length === 0) {
        this.$message.error('请选择删除场景')
        return
      }

      this.isShowDelWarning = true
    },
    confirmDmDelMethods() {
      if(this.selectSceneList.length > 0) {
        let tmpIdList = []
        this.selectSceneList.forEach((item) => {
          tmpIdList.push(item.id)
        })
        const params = {
          ids: [...tmpIdList]
        }

        service.delWindowScene(params).then(() => {
          this.$message.success('删除成功')
          this.getSceneList()
          this.isShowDelWarning = false
        })
      } else {
        const params = {
          ids: [this.delClickCache.id]
        }

        service.delWindowScene(params).then(() => {
          this.$message.success('删除成功')
          this.getSceneList()
          this.isShowDelWarning = false
        })
      }
    },
    cancelDelMethods() {
      this.delClickCache = {}
      this.isShowDelWarning = false
    },
    showDelSceneWarn(row) {
      this.delClickCache = {
        ...row
      }
      this.isShowDelWarning = true
    },
    editTerminalScene(row) {
      // 获取详情
      const params = {
        sceneId: row.id
      }
      service.getWindowSceneDetail(params).then((res) => {
        let clientTmp = {
          ...res.data.clients[0]
        }
        console.log('clientTmp ---', clientTmp)
        this.isShowSceneForm = true
        this.$nextTick(() => {
          this.$refs.sceneEditFormRef.toggleRows(row, clientTmp, res.data.clients)
          this.$refs.sceneEditFormRef.setTerminalTableDisabled({id: clientTmp.client_id})
        })
      })
    },
    submitSuccessMethods() {
      this.getSceneList()
      this.isShowSceneForm = false
    },
    getSceneList() {
      const params = Object.assign({}, this.searchObj)
      this.$refs.singleSceneTableRef.queryData(params)
    },
    addNewFold() {

    },
    startUploadFile() {
      this.isShowSceneForm = true
    },
    handlerClose() {
      this.isShowSceneForm = false
    },
    changeSearchMethods(msg) {
      this.searchObj.clientId = msg.clientId
      this.getSceneList()
    },
    goToNextFold() {

    },
    changeRowMethods(rows) {
      this.selectSceneList = [...rows]
    }
  }
}
</script>

<style scoped lang="scss">
.scene-global-page {
  padding: 15px;
  background: white;
  .commonTable{
    margin-top: 15px;
  }
}
</style>
